<template>
    <div class="header">
        <div class="logo-img">
            <img src="../../assets/imgs/logo.jpg"/>
        </div>
        <div class="logo">
            后台管理系统
        </div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
                    <img class="user-logo" src="../../assets/imgs/img.jpg"/>
                    {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="modify">修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                username: "admin"
            }
        },
        methods: {
            handleCommand(command){
                if(command=='loginout'){
                    localStorage.removeItem('ms_username');
                    this.$router.push('/login');
                }
            }
        }
    }
</script>
<style>
    .header{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        line-height: 70px;
        color: #fff;
    }
    .header .logo-img{
        float: left;
        width: 200px;
    }

    .header .logo{
        float: left;
        width: 250px;
        text-align: left;
        font-size: 25px;
        padding-left: 40px;
    }
    .user-info{
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #fff;
    }
    .user-info .el-dropdown-link{
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
    }
    .user-info .user-logo{
        position: absolute;
        left: 0;
        top: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
</style>
